<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>

    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
    <!-- 引入样式vant.js -->
    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <main-select></main-select>
      <div class="main">
        <div class="title">热门职位</div>
        <div class="dis500">
          <van-tabs v-model="active" class="tabsBox" background="#f3f4f7">
            <van-tab
              :title="i"
              v-for="(i,index) in tabs"
              :key="index"
            ></van-tab>
          </van-tabs>
        </div>
        <div>

        </div>
        <div class="phoneCard">
          <card-work></card-work>
        </div>
        <div class="flex jcc w100">
          <div class="more">查看更多</div>
        </div>
        <div class="title">热门企业</div>
        <card-company></card-company>
        <div class="flex jcc w100">
          <div class="more">查看更多</div>
        </div>
      </div>
      <main-footer class="mgt40"></main-footer>
    </div>
  </body>
</html>
<style scoped>
  body {
    background-color: #f3f4f7;
  }
  .title {
    font-size: 26px;
    font-weight: bold;
    margin: 20px 10px;
  }
  .more {
    display: inline;
    padding: 8px 30px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 5px;
    font-size: 14px;
    margin: 10px auto;
  }
  .more:hover {
    background-color: var(--primary-color);
    color: #fff;
  }
  .tabsBox {
    width: 90%;
  }
  
  @media (max-width: 500px) {
    .phoneCard{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  @media (min-width: 500px) {
    .title {
      font-size: 32px !important;
    }
    .main {
      width: 1400px;
      margin: 0 auto;
    }
  }
</style>
<script>
  Vue.use(httpVueLoader);
  new Vue({
    el: "#app",
    data: {
      active: 0,
      tabs: ["游戏", "摄影", "游戏", "摄影", "游戏", "摄影"],
    },
    components: {
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-select": httpVueLoader("../common/commpent/main/mainSelect.vue"),
      "ucard-select": httpVueLoader("../common/commpent/ucard/selectCard.vue"),
      "card-work": httpVueLoader("../common/commpent/ucard/workCard.vue"),
      "card-company": httpVueLoader("../common/commpent/ucard/companyCard.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
    },
    mounted() {},
    methods: {},
  });
</script>
